<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../0js/vue.js"></script>
</head>
<body>

<div id="root">
    <!--全局注册组件，不需要注册也可以用-->
    <hello></hello>

    <school></school>
    <hr>
    <student></student>

</div>

<div id="root2">
    <hello></hello>
</div>

<script type="text/javascript">
    // 阻止vue在启动时生成生产提示
    Vue.config.productionTip = false

    // 创建组件, 组件最终都要vm管理
    const school = Vue.extend({
        template: `
          <div>
          <h2>学校{{name}}</h2>
          <h2>地址{{address}}</h2>
          <button @click="showName">点我提示学校</button>
          </div>
        `,
        data() {
            return {
                name: "冯镠霖 学校",
                address: "中国 学校"
            }
        },
        methods: {
            showName() {
                alert(this.name)
            }
        }
    })

    // 创建组件
    const student = Vue.extend({
        template: `
          <div>
              <h2>名字{{name}}</h2>
              <h2>地址{{address}}</h2>
          </div>
        `,
        data() {
            return {
                name: "冯镠霖",
                address: "中国"
            }
        }
    })

    const hello = Vue.extend({
        template: `
          <div>
              <h2>你好 hello</h2>
          </div>
        `
    })

    const app = Vue.extend({
        template: `
          <div>
              <school></school>
                <student></student>
          </div>
        `,
        components: { // 局部注册组件
            school: school,
            student: student
        },
    })

    // 全局组件
    Vue.component("hello", hello)

    const vm = new Vue({
        el:"#root",
        template: `
            <app></app>
        `,
        components: { // 局部注册组件
            app:app
        },
        data: {
            name: "冯镠霖"
        },
        mounted() {
            console.dir(Vue.extend)
        }
    });

    new Vue({
        el: "#root2",
        components: {
            hello
        }
    })

</script>
</body>
</html>